<template>
  <div>
    <!-- 高级查询开始 -->
    <div v-show="searchVisible" class="top-search">
      <el-form ref="advancedSearchRef" :model="advancedSearch">
        <el-row :gutter="20">
          <el-col>
            <span class="textCss">部队名称 :</span>
            <el-input
              v-model="advancedSearch.troopName"
              placeholder="部队名称"
              style="width: 175px"
              prop="troop_name"
            >
            </el-input>
            <span class="textCss">兵种名称 :</span>
            <el-input
              v-model="advancedSearch.soldierInfoName"
              placeholder="兵种名称"
              style="width: 175px"
              prop="soldierInfoName"
            >
            </el-input>

            <span class="textCss">年度 :</span>
            <el-input
              v-model="advancedSearch.year"
              placeholder="年度"
              style="width: 175px"
              prop="year"
            >
            </el-input>
            <span class="textCss">批次 :</span>
            <el-input
              v-model="advancedSearch.batch"
              placeholder="批次"
              style="width: 175px"
              prop="batch"
            >
            </el-input>
            <div class="footer-button">
              <el-button type="primary" plain @click="allSearch"
                >查询</el-button
              >
              <el-button type="info" plain @click="reset">重 置</el-button>
              <el-button @click="advancedQueryClose">关 闭</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 高级查询结束 -->
    <!-- 顶部功能按钮开始 -->
    <el-header class="top_button">
      <div class="left-panel"></div>
      <div class="right-panel">
        <div class="right-panel-search">
          <div class="mt-4">
            <el-input
              v-model="searchData"
              placeholder="查询内容"
              class="input-with-select"
            >
              <template #prepend>
                <el-select
                  v-model="selectField"
                  placeholder="查询类型"
                  style="width: 115px"
                >
                  <el-option label="部队名称" value="troop_name" />
                  <el-option label="兵种名称" value="soldier_info_name" />
                  <el-option label="年度" value="year" />
                  <el-option label="批次" value="batch" />
                </el-select>
              </template>
              <template #append>
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-search"
                  @click="searchNameFun"
                ></el-button>
              </template>
            </el-input>
          </div>

          <el-button type="primary" plain @click="advancedQuery"
            >高级查询</el-button
          >
        </div>
      </div>
    </el-header>
    <!-- 顶部功能按钮结束 -->
    <!-- 主体表格开始 -->
    <MyTable :columns="columns" ref="tableRef" :data="allList">
      <el-table-column type="selection" width="55" />
      <template v-for="(item, index) in columns" :key="index">
        <el-table-column
          :fixed="index == 0"
          :label="item.name"
          :prop="item.prop"
          v-if="item.show"
          show-overflow-tooltip
          sortable
          width="120"
        />
      </template>
      <el-table-column fixed="right" label="操作" width="120">
        <template v-slot="scope">
          <el-button
            type="text"
            size="small"
            @click="select_someone(scope.row.conditionalCandidateId)"
            >选人</el-button
          >
        </template>
      </el-table-column>
    </MyTable>
    <!-- 主体表格结束 -->
    <!-- 分页区开始 -->
    <div class="page">
      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!-- 分页区结束 -->
	<!-- 选人弹框 -->
	   <el-dialog v-model="updateDialogVisible" width="50%">
		<el-form  label-width="120px">
			 <el-form-item label="选择人数">
		<el-input v-model="select_person" />
		</el-form-item>
			</el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="warning" @click="updateDialogVisible = false"
            >取消</el-button
          >
          <el-button type="primary" @click="updateConfirm()">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
import {
  showPageApi,
  singleSearchApi,
  allSearchApi,
  select_person_api,
} from "@/api/reserveArms/conditionArms";
export default defineComponent({
  name: "conditionArms",
  setup() {
    onMounted(() => {
      showPage_methods.showPage();
    });
    // 查询和选人部分
    const search_state = reactive({
      // 姓名查询
      // 查询内容
      searchData: "",
      //  选择字段
      selectField: "",
      // 高级查询
      searchVisible: false,
      //  对象属性属性要和接口一致
    //   advancedSearch: {
    //     batchId: "",
    //     cultureProgram: "",
    //     name: "",
    //     volunteerOne: "",
    //     volunteerTwo: "",
    //   },
		advancedSearch:{},
	//   选人
	select_person_id:null,
	select_person:'',
	updateDialogVisible:false
    });
    const search_methods = {
      select_someone(id) {
		  search_state.updateDialogVisible = true
		  search_state.select_person_id = id
	  },
	async updateConfirm(){
		search_state.updateDialogVisible  = false
		let person = search_state.select_person
		const id = search_state.select_person_id
		console.log(id,person);
		let res = await select_person_api.put(person,id)
		if (res.code === 200) {
          ElMessage.success("修改信息成功！");
          showPage_methods.showPage();
          search_state.updateDialogVisible = false;
        } else {
          ElMessage.error("修改出错，请稍后重试！");
          search_state.updateDialogVisible = false;
        }
		},
      // 单字段查询
      async searchNameFun() {
        const select = search_state.selectField;
        const searchData = search_state.searchData;
        const res = await singleSearchApi.get(searchData, select);
        if (res.code !== 200) {
          ElMessage.error("查询数据失败");
        } else if (res.data.length == 0) {
          ElMessage.success("查询成功，无此数据");
          showPage_state.allList = res.data;
        } else {
          ElMessage.success("查询成功");
          showPage_state.allList = res.data;
        }
        // console.log(res);
      },
      // 高级查询
      async allSearch() {
        let data = search_state.advancedSearch;
        const res = await allSearchApi.post(data);
		console.log(res);
        if (res.code === 200 && res.rows.length == 0) {
          ElMessage.success("查询成功，无此数据");
          showPage_state.allList = res.rows;
        } else if (res.code === 200) {
          ElMessage.success("查询成功");
          showPage_state.allList = res.rows;
        } else {
          ElMessage.error("查询出错，请稍后重试！");
        }
      },
      //   重置高级查询
      reset() {
        //   element表单方法没实现
        //  _this.$refs.advancedSearchRef.resetFields();
        search_state.advancedSearch = {};
      },
      advancedQuery() {
        search_state.searchVisible = true;
      },
      //   关闭高级查询
      advancedQueryClose() {
        search_state.searchVisible = false;
        search_state.advancedSearch = {};
      },
    };
    const showPage_state = reactive({
      // 表头行字段
      columns: [
        { name: "部队名称", show: true, prop: "troopName" },
        { name: "兵种名称", show: true, prop: "soldierInfoName" },
        { name: "年度", show: true, prop: "year" },
        { name: "批次", show: true, prop: "batch" },
        { name: "任务数", show: true, prop: "numberPeople" },
        { name: "已完成任务数", show: true, prop: "completeNumber" },
        { name: "剩余任务数", show: true, prop: "surplusNumberPeople" },
        { name: "志愿总填报人数", show: true, prop: "volunteerTotalNumber" },
        { name: "一志愿人数", show: true, prop: "volunteerOneNumber" },
        { name: "二志愿人数", show: true, prop: "volunteerTwoNumber" },
        { name: "选人人数", show: true, prop: "candidatesNumber" },
      ],
      // 页面展示数据
      allList: [],
      //分页数据
      page: {
        current: 1,
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      visible: false,
    });
    const showPage_methods = {
      changeColumn(columns) {
        showPage_state.columns = columns;
      },
      async showPage() {
        const res = await showPageApi.get(showPage_state.page);
        showPage_state.page.total = res.data.total;
        showPage_state.allList = res.data.result;
        // console.log(res);
      },
      // 改变页码
      handleCurrentChange(newSize) {
        showPage_state.page.pageNum = newSize;
        // 重新获取数据
        showPage_methods.showPage();
      },
      handleSizeChange(newPage) {
        showPage_state.page.pageSize = newPage;
        showPage_methods.showPage();
      },
    };

    return {
      ...toRefs(showPage_state),
      ...showPage_methods,
      ...toRefs(search_state),
      ...search_methods,
    };
  },
});
</script>

<style  scoped>
.form-closex {
  display: flex;
}
/* 分页条居中 */
.el-pagination {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.top-search {
  width: 100%;
}
.top-search .textCss {
  font-size: 15px;
  margin-left: 30px;
  margin-right: 10px;
}

.top-search .inputCss {
  width: 210px;
}
.footer-button {
  margin-left: 15px;
  display: inline-block;
}

.top_button {
  display: flex;
  justify-content: space-between;
}
</style>




